<template>
  <div class="panel">
    <el-button @click="pickCoordinate">拾取坐标</el-button>
    <el-button @click="drawPolygonFlatStyle">绘制面要素</el-button>
    <el-button @click="drawLineFlatStyle">绘制线要素</el-button>
    <el-button @click="drawPointFlatStyle">绘制点要素</el-button>
    <el-button @click="drawLabelFlatStyle">绘制图形标注</el-button>
  </div>
  <base-map :center="center" :zoom="zoom" />
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";
import WebGLVectorLayer from "ol/layer/WebGLVector";
import { Vector as VectorLayer } from "ol/layer";
import { Vector as VectorSource } from "ol/source";
import Feature from "ol/feature";
import { Point, LineString, Polygon, Circle } from "ol/geom";
import Draw, { createRegularPolygon, createBox } from "ol/interaction/Draw";

import { drawBox, drawLine, drawPoint } from "@/utils/draw";

// 地图视图初始位置为广州市
const center = [113.2814806118886, 23.128317572638363];
const zoom = 12;

const examplePolygon = [
  [
    [113.03703481110736, 23.08358617574624],
    [113.17196065339252, 23.08358617574624],
    [113.17196065339252, 23.20964665330365],
    [113.03703481110736, 23.20964665330365],
    [113.03703481110736, 23.08358617574624],
  ],
];

const polygonStyles = {
  base: {
    "fill-color": "red", //填充颜色
    "stroke-color": "black", //边框颜色
    "stroke-width": 5, //边框宽度
  },
  img: {
    //填充图片
    "fill-pattern-src":
      "https://tse1-mm.cn.bing.net/th/id/OIP-C.yUdkH707l9Y1S0tmbAQlcgHaJO?w=161&h=201&c=7&r=0&o=5&pid=1.7",
    "stroke-color": "black", //边框颜色
    "stroke-width": 3, //边框宽度
  },
};

function drawPolygonFlatStyle() {
  const vectorLayer = new VectorLayer({
    source: new VectorSource({
      features: [
        new Feature({
          geometry: new Polygon(examplePolygon),
        }),
      ],
    }),
  });

  vectorLayer.setStyle(polygonStyles.img);
  window.map.addLayer(vectorLayer);
}

const exampleLineString = [
  [113.25710469636127, 23.242621601111583],
  [113.30928975495502, 23.164306100067744],
  [113.23787862214252, 23.164993078147077],
  [113.29487019929095, 23.094234335975887],
  [113.2371919766347, 23.095951781174215],
  [113.2862871304433, 23.023819082844362],
];

const lineStyles = {
  base: {
    "stroke-color": "red", //边框颜色
    "stroke-width": 5, //边框宽度
  },
  dash: {
    "stroke-color": "red", //边框颜色
    "stroke-width": 5, //边框宽度
    "stroke-line-dash": [10, 10], //虚线样式
  },
  img: {
    "stroke-color": "red", //边框颜色
    "stroke-width": 25, //边框宽度
    "stroke-pattern-src": "src/assets/images/example/arrow.svg", //边框填充图片
    "stroke-pattern-spacing": 20, //边框填充图片间距
  },
};

function drawLineFlatStyle() {
  // const vectorLayer = new VectorLayer({
  //   source: new VectorSource({
  //     features: [
  //       new Feature({
  //         geometry: new LineString(exampleLineString),
  //       }),
  //     ],
  //   }),
  // });

  const vectorLayer = new WebGLVectorLayer({
    source: new VectorSource({
      features: [
        new Feature({
          geometry: new LineString(exampleLineString),
        }),
      ],
    }),
  });

  vectorLayer.setStyle(lineStyles.img);
  window.map.addLayer(vectorLayer);
}

const examplePoints = [
  [113.49399739655658, 23.23266041896127],
  [113.49640065583392, 23.171175880861064],
  [113.50120717438861, 23.057824497771293],
];

const pointStyles = {
  icon: {
    "icon-src": "src/assets/images/example/point.svg", // 图标路径
    "icon-anchor": [0.5, 0], // 图标锚点
    "icon-width": 50, // 图标宽度
    "icon-height": 50, // 图标高度
  },
  circle: {
    "circle-fill-color": "red", // 圆形颜色
    "circle-radius": 15, // 圆形半径
    "circle-stroke-color": "black", // 圆形边框颜色
    "circle-stroke-width": 3, // 圆形边框宽度
  },
  star: {
    "shape-points": 5, // 图形顶点数
    "shape-fill-color": "Gold", // 图形填充颜色
    "shape-radius": 10, // 图形半径
    "shape-radius2": 20, // 图形外边框半径 (绘制星形时需要)
    "shape-angle": Math.PI, // 图形旋转角度 (单位：弧度)
  },
  regular: {
    "shape-points": 6, // 图形顶点数
    "shape-fill-color": "#005588", // 图形填充颜色
    "shape-radius": 20, // 图形半径
    "shape-angle": Math.PI / 2, // 图形旋转角度 (单位：弧度)
  },
};

function drawPointFlatStyle() {
  const vectorLayer = new VectorLayer({
    source: new VectorSource({
      features: examplePoints.map(point => {
        return new Feature({
          geometry: new Point(point),
        });
      }),
    }),
  });

  vectorLayer.setStyle(pointStyles.regular);
  window.map.addLayer(vectorLayer);
}

// 图形标注
const labelStyles = {
  polygon: {
    "fill-color": "red", //填充颜色
    "stroke-color": "black", //边框颜色
    "stroke-width": 5, //边框宽度
    "text-value": "面要素", //文本内容
    "text-font": "bold 28px serif", //字体样式
  },
  line: {
    "stroke-color": "red", //边框颜色
    "stroke-width": 5, //边框宽度
    "text-value": "线要素", //文本内容
    "text-placement": "line", //文本位置
    "text-font": "bold 28px serif", //字体样式
    "text-offset-y": -20, //文本垂直偏移量
  },
  point: {
    "circle-fill-color": "red", // 圆形颜色
    "circle-radius": 15, // 圆形半径
    "text-value": "点要素", //文本内容
    "text-font": "bold 28px serif", //字体样式
    "text-offset-y": 35, //文本垂直偏移量
  },
};

function drawLabelFlatStyle() {
  const polygonVectorLayer = new VectorLayer({
    source: new VectorSource({
      features: [
        new Feature({
          geometry: new Polygon(examplePolygon),
        }),
      ],
    }),
  });

  polygonVectorLayer.setStyle(labelStyles.polygon);
  window.map.addLayer(polygonVectorLayer);

  const lineVectorLayer = new VectorLayer({
    source: new VectorSource({
      features: [
        new Feature({
          geometry: new LineString(exampleLineString),
        }),
      ],
    }),
  });

  lineVectorLayer.setStyle(labelStyles.line);
  window.map.addLayer(lineVectorLayer);

  const pointVectorLayer = new VectorLayer({
    source: new VectorSource({
      features: examplePoints.map(point => {
        return new Feature({
          geometry: new Point(point),
        });
      }),
    }),
  });

  pointVectorLayer.setStyle(labelStyles.point);

  window.map.addLayer(pointVectorLayer);
}

function pickCoordinate() {
  // drawBox(window.map);
  // drawLine(window.map);
  drawPoint(window.map);
}
</script>

<style lang="less" scoped>
.panel {
  position: absolute;
  top: 10px;
  left: 150px;
  z-index: 999;
}
</style>
